<template>
  <div class="slider" :key="list">
    <el-button class="slider-arrow" @click="handleClick(-1)" :disabled="carouselIndex === 0">
      <i class="iconfont">&#xe915;</i>
    </el-button>
    <el-carousel  :autoplay="autoplay" ref="carousel" :key="list" :height="height" indicator-position="none">
      <el-carousel-item v-for="items in myList" :key="items">
        <cellbox class="slider-cellbox" :gutter="gutter">
          <cell-item 
            v-for="item in items"
            @click.native="handleChange(item)" 
            class="group-slider-item" :class="{'group-slider-item-active': value==item}" 
            :key="item" 
            :style="{width:`${100/slides}%`}">
              <slot v-if="$scopedSlots.default" v-bind="item"></slot>
              <template v-else>
                {{item}}
              </template>
          </cell-item>
          <cell-item v-if="items.length !== slides"></cell-item>
        </cellbox>
      </el-carousel-item>
    </el-carousel>
    <el-button class="slider-arrow" @click="handleClick(1)" :disabled="carouselIndex === maxIndex || list.length <= 7 ">
      <i class="iconfont">&#xe652;</i>
    </el-button>
  </div>
</template>

<script>
export default {
  props: {
    value: {},
    list: {
      type: Array,
      default () {
        return []
      }
    },
    slides: {
      type: Number
    },
    gutter: {
      type: Number,
      default: 2
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '120px'
    }
  },
  computed: {
    myList () { // 数据切块
      let array = []
      if (this.list) {
        for (let i = 0; i < this.list.length;) {
          array.push(this.list.slice(i, i + this.slides))
          i = i + this.slides
        }
      }
      return array
    },
    maxIndex () {
      return Math.ceil(this.list.length / this.slides) - 1
    }
  },
  watch: {
    list () {
      this.carouselIndex = 0
      this.$refs.carousel.setActiveItem(0)
    }
  },
  data () {
    return {
      carouselIndex: 0 // 走马灯当前显示块索引
    }
  },
  methods: {
    handleClick (i) {
      i === 1 && this.$refs.carousel.next()
      i === -1 && this.$refs.carousel.prev()
      this.$nextTick(() => {
        this.carouselIndex = this.$refs.carousel.activeIndex
      })
    },
    handleChange (value) {
      this.$emit('input', value).$emit('change', value)
    }
  }
}
</script>

<style lang="scss" >
  @import '~styles/var.scss';
  .slider{
    text-align:center;
    position:relative;
    word-break: break-all;
    &-cellbox{
      height: 100%;
    }
    .el-carousel{
      margin: 0 34px;
      overflow: hidden;
      &__arrow{
        display: none!important;
      }
      &__item{
        background:#fff;
      }
    }
    &-arrow{
      position:absolute;
      height: 100%;
      width: 32px;
      right:0;
      top:0;
      padding: 0;
      border-radius:0;
      background:#fafafa;
      text-align: center;
      &:first-child{
        right: auto;
        left: 0
      }
      &:focus{
        border-color:$border-color-base;
      }
      .iconfont{
        font-size: 24px;
      }
      &.is-disabled{
        .iconfont{
          color:inherit;
        }
      }
    }
    .group-slider-item{
      height: 36px;
      border: 1px solid $border-color-base;
      cursor: pointer;
      &.group-slider-item-active{
          border-color:$primary-color;
          border-top-width:1px;
          background-color:$primary-color;
          color: #fff;
      }
    }
    .el-carousel__arrow{
      display: none!important;
    }
  }
</style>
